<template>
  <div class="vux-1px-t">
    <van-swipe-cell
      :right-width="65"
      :left-width="65"
    >
      <span
        v-if="showOperation"
        slot="left"
        type="primary"
        @click.native="onButtonClick('edit', item, index)"
      >
        {{ '编辑' }}
      </span>
      <van-cell-group>
        <van-cell>
          <div
            v-if="header"
            class="weui-panel__hd"
            @click="onClickHeader"
          >
            {{ model.name }}
            <slot name="header" />
          </div>
          <div class="weui-panel__bd">
            <div name="body">
              <div
                v-for="(item, index) in list_locate"
                :key="index"
              >
                <div transition-mode="follow">
                  <div
                    slot="content"
                    class="demo-content vux-1px-t"
                    @click.prevent="onItemClick(item)"
                  >
                    <template v-if="item.title">
                      <h4 class="weui-media-box__title">
                        {{ item.title }}
                      </h4>
                    </template>
                    <ul class="weui-media-box__info">
                      <template v-for="(field) in item.meta">
                        <template v-if="!field.invisible || !field.is_show_form_tree">
                          <template
                            v-if="['char', 'date', 'datetime', 'integer', 'float'].indexOf(field.type)>=0"
                          >
                            <li
                              :key="field.id"
                              class="weui-media-box__info__meta"
                            >
                              {{ field.title }}: <span class="line_color_value">{{ field.value }}</span>
                            </li>
                          </template>
                          <template
                            v-if="['many2one'].indexOf(field.type)>=0"
                          >
                            <li
                              :key="field.id"
                              class="weui-media-box__info__meta"
                            >
                              {{ field.title }}: <span class="line_color_value">{{ field.options ? field.options[0].value: '' }}</span>
                            </li>
                          </template>
                          <template v-else-if="['boolean'].indexOf(field.type) >= 0">
                            <li
                              v-if="field.value"
                              :key="field.id"
                              class="weui-media-box__info__meta"
                            >
                              {{ field.title }}:
                              <icon type="success" />
                            </li>
                            <li
                              v-else
                              :key="field.id"
                              class="weui-media-box__info__meta"
                            >
                              {{ field.title }}:
                              <icon type="cancel" />
                            </li>
                          </template>
                          <template v-else-if="['selection'].indexOf(field.type) >= 0">
                            <li
                              v-if="field.value"
                              :key="field.id"
                              class="weui-media-box__info__meta"
                            >
                              {{ field.title }}:
                              <span class="line_color_value">{{ field.options?field.options[0].value:'' }}</span>
                            </li>
                          </template>
                        </template>
                      </template>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="weui-panel__ft">
            <a
              v-if="footer && footer.title"
              class="weui-cell weui-cell_access weui-cell_link"
              @click.prevent="onClickFooter"
            >
              <div
                class="weui-cell__bd"
              >{{ footer.title }}
              </div>
            </a>
          </div>
        </van-cell>
      </van-cell-group>
      <span
        v-if="showOperation"
        slot="right"
        type="warn"
        @click.native="onButtonClick('delete', item, index)"
      >
        {{ '删除' }}
      </span>
    </van-swipe-cell>
    <div>
      <popup
        v-model="showForm"
        height="100%"
        position="bottom"
        :show-mask="true"
      >
        <div class="popup0">
          <group>
            <treeForm
              :id="id"
              :all-form-data.sync="allFormData"
              :is-edit="isEdit"
              :model="model"
              @save="addNewRecord"
              @cancel="cancelAdd"
            />
          </group>
        </div>
      </popup>
    </div>
  </div>
</template>

<script>
  import treeForm from './TreeForm.vue'

  export default {
  name: 'TreeRow',
  components: {
    treeForm
    // Panel,
    // SwipeCell
  },
  // directives: {
  //   TransferDom
  // },
  props: {
    header: { type: String, default: 'header' },
    footer: { type: String, default: 'footer' },
    list: { type: String, default: '' },
    model: { type: String, default: '' },
    viewId: { type: Number, default: 0 },
    recordField: { type: Array, default () { return [] } },
    context: { type: String, default: '' },
    showOperation: { type: Boolean }
  },
  data: function () {
    return {
      showForm: false,
      id: '',
      isEdit: false,
      allFormData: {},
      menu: [],
      editIndex: 0
    }
  },
  computed: {
    list_locate: {
      get: function () {
        return this.list || []
      },
      set: function (v) {
        this.$emit('update:list', v)
      }
    }
  },
  watch: {
    list_locate: {
      handler: function (val, oldVal) {
        this.$emit('update:list', val)
      },
      deep: true
    }
  },
  methods: {
    onButtonClick: function (event, item, index) {
      let self = this
      if (event === 'edit') {
        if (!self.recordField) {
          self.$router.push({
            name: 'NewForm',
            params: {
              id: item.id,
              model: self.model,
              viewId: self.viewId
            }
          })
        } else {
          self.allFormData = {
            fieldVals: item.meta,
            id: item.id
          }
          self.isEdit = true
          self.editIndex = index
          self.showForm = true
        }
      } else if (event === 'delete') {
        self.delete(item, index)
      }
    },
    delete: function (item, index) {
      let self = this
      if (!self.recordField) {
        self.$http.get('/odoo/mobile/button/method', {
          params: {
            method: 'unlink',
            model: self.model,
            ids: item.id
          }
        }).then(function (response) {
          if (response.success) {
            self.list_locate.splice(index, index + 1)
          } else {
            // self.$emit('error-toast', { toastType: 'warn', toastMsg: response.errMsg, toastShow: true })
          }
        }).catch(function () {

        })
      } else {
        self.list_locate.splice(index, index + 1)
      }
    },
    addNewRecord: function (newRecord) {
      let self = this
      if (!self.isEdit) {
        this.list_locate.push({ meta: newRecord.fieldVals, id: newRecord.id || 0, title: '新添加' })
      } else {
        this.list_locate[self.editIndex] = { meta: newRecord.fieldVals, id: newRecord.id || 0, title: '本条修改记录' }
      }
      this.allFormData = {}
      this.showForm = false
    },
    cancelAdd: function (newRecord) {
      this.allFormData = {}
      this.showForm = false
    },
    onClickFooter: function () {
      let self = this
      self.isEdit = false
      self.allFormData = { fieldVals: JSON.parse(JSON.stringify(self.recordField)), id: 0 }
      self.showForm = true
    },
    onClickHeader: function () {
      this.$emit('on-click-header')
    },
    onItemClick: function (item) {
      this.$emit('on-click-tree-item', item)
    },
    get_form_data: function () {
      let self = this
      self.$http.get('/odoo/mobile/form/new/data', { model: this.model, id: this.recordId }).then(function (response) {
        self.allFormData = response
      }).catch(function (error) {
        console.error('TreeRow数据获取失败', error, __filename)
      })
    }
  }
}
</script>

<style >

  .weui-media-box__title {
    font-size: 15px;
    color: #080209;
    padding: 5px 0px 0px 10px;
  }

  .weui-panel__hd {
    color: #080209;
  }

  .weui-media-box__info {
    padding: 0px 0px 10px 10px;
    margin-top: 8px;

  }

  .weui-media-box__info__meta {
    color: #92888f
  }

  .line_color_value {
    color: #080209
  }
</style>
